<template>
  <div class="user-module">
    <div style="padding: 10px 0">
      <a-typography-title :level="4">我的图表</a-typography-title>
    </div>

    <a-row :gutter="20" v-if="moduleList.length">
      <a-col :span="6" v-for="item in moduleList" :key="item._id" style="margin-bottom: 20px">
        <a-card hoverable>
          <template #cover>
            <img
              :alt="item.title"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          </template>
          <template class="ant-card-actions" #actions>
            <ShareAltOutlined />
            <router-link :to="'/make/' + item._id"><EditOutlined /></router-link>
            <a-popconfirm title="确定要删除吗?" @confirm="delModule(item)">
              <DeleteOutlined />
            </a-popconfirm>
          </template>
          <a-card-meta :title="item.title" :description="item.describe || '无'" />
        </a-card>
      </a-col>
    </a-row>

    <a-empty v-if="!moduleList.length" style="padding-top: 70px">
      <template #description> 您还没有添加任何图表 </template>
      <a-button type="primary">立即创建</a-button>
    </a-empty>
  </div>
</template>
<script>
  import io from '@/utils/http/index.js';
  import { DeleteOutlined, EditOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
  import { defineComponent, ref, reactive, computed, toRefs } from 'vue';
  export default {
    components: { DeleteOutlined, EditOutlined, ShareAltOutlined },
    setup() {
      const state = reactive({
        moduleList: [],
      });

      // 获取模块
      const getModuleList = () => {
        io({
          url: '/show/api/module',
        }).then((res) => {
          state.moduleList = res.data;
        });
      };

      // 删除模块
      const delModule = (item) => {
        io({
          url: '/show/api/module/' + item._id,
          method: 'delete',
        }).then((res) => {
          getModuleList();
        });
      };

      getModuleList();

      return {
        ...toRefs(state),
        delModule,
      };
    },
  };
</script>
